// components/common/DeviceControl.tsx
import React from 'react';
import { View, Text, StyleSheet, Switch, Button, TouchableOpacity } from 'react-native';
import { DeviceParam, optionLabels } from '@/constants/deviceParameters';

interface DeviceControlProps {
  param: DeviceParam;
  value: any;
  onValueChange: (paramId: string, newValue: any) => void;
  disabled?: boolean; // 新增可选字段
}

// ...existing code...

export default function DeviceControl({ param, value, onValueChange, disabled }: DeviceControlProps) {
  const renderControl = () => {
    switch (param.type) {
      case 'switch':
        return (
          <Switch
            value={Boolean(value)}
            onValueChange={(newValue) => onValueChange(param.id, newValue)}
            trackColor={{ false: '#767577', true: '#81b0ff' }}
            thumbColor={value ? '#f5dd4b' : '#f4f3f4'}
            disabled={disabled}
          />
        );

      case 'button':
  return (
    <View style={styles.buttonGroup}>
      {param.options?.map((option) => {
        const isSelected = value === option;
        return (
          <TouchableOpacity
            key={option}
            style={[
              styles.optionButton,
              isSelected && styles.selectedButton,
              !isSelected && disabled && styles.disabledButton, // 只让未选中项变灰
            ]}
            onPress={() => !disabled && onValueChange(param.id, option)}
            disabled={disabled}
            activeOpacity={disabled ? 1 : 0.7}
          >
            <Text style={[
              styles.optionButtonText,
              isSelected && styles.selectedButtonText,
              !isSelected && disabled && { color: '#aaa' }, // 只让未选中项文字变灰
            ]}>
              {optionLabels[option] || option}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );

      case 'stepper':
        return (
          <View style={styles.stepperContainer}>
            <TouchableOpacity
              style={[
                styles.stepperButton,
                (value <= (param.min || 0) || disabled) && styles.disabledButton
              ]}
              onPress={() => {
                if (disabled) return;
                const newValue = Math.max((param.min || 0), value - (param.step || 1));
                onValueChange(param.id, newValue);
              }}
              disabled={value <= (param.min || 0) || disabled}
            >
              <Text style={styles.stepperButtonText}>-</Text>
            </TouchableOpacity>
            
            <View style={styles.stepperValue}>
              <Text style={styles.stepperValueText}>{value}</Text>
            </View>
            
            <TouchableOpacity
              style={[
                styles.stepperButton,
                (value >= (param.max || 100) || disabled) && styles.disabledButton
              ]}
              onPress={() => {
                if (disabled) return;
                const newValue = Math.min((param.max || 100), value + (param.step || 1));
                onValueChange(param.id, newValue);
              }}
              disabled={value >= (param.max || 100) || disabled}
            >
              <Text style={styles.stepperButtonText}>+</Text>
            </TouchableOpacity>
          </View>
        );

      case 'readonly':
        return (
          <View style={styles.controlItem}>
            <Text style={styles.readonlyText}>{value}</Text>
          </View>
        );

      default:
        return <Text>未支持的控制类型</Text>;
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.labelContainer}>
        <Text style={styles.label}>{param.label}</Text>
        {/* 可选：显示范围 */}
        {param.type === 'stepper' && (
          <Text style={styles.range}>
            {param.min ?? ''}{param.min !== undefined ? ' ~ ' : ''}{param.max ?? ''}
          </Text>
        )}
      </View>
      <View style={styles.controlContainer}>
        {renderControl()}
      </View>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  labelContainer: {
    flex: 1,
  },
  label: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
  },
  range: {
    fontSize: 12,
    color: '#888',
    marginTop: 2,
  },
  controlContainer: {
    flex: 1,
    alignItems: 'flex-end',
  },
  
  // Button group styles
  buttonGroup: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-end',
    gap: 8,
  },
  optionButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 6,
    borderWidth: 1,
    borderColor: '#ddd',
    backgroundColor: '#fff',
  },
  selectedButton: {
    backgroundColor: '#007AFF',
    borderColor: '#007AFF',
  },
  optionButtonText: {
    fontSize: 14,
    color: '#333',
  },
  selectedButtonText: {
    color: '#fff',
    fontWeight: '500',
  },
  
  // Stepper styles
  stepperContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  stepperButton: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: '#007AFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  disabledButton: {
    backgroundColor: '#eee',
    borderColor: '#ccc',
  },
  stepperButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
  stepperValue: {
    minWidth: 40,
    alignItems: 'center',
  },
  stepperValueText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
  },
  readonlyText: {
    fontSize: 14,
    color: '#888',
  },
  controlItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  controlLabel: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
  },
});